<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: qupen
  Date: 2016/9/18
  Time: 19:43
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<jsp:include page="../../include/head.jsp">
    <jsp:param name="title" value="update user"/>
</jsp:include>

<jsp:include page="../../include/tenant_header.jsp"/>

<jsp:include page="../../include/tenant_sidebar.jsp"/>

<div class="content-wrapper">
    <section class="content-header">
        <h4 class="page-title" style="display: inline-block"><spring:message code="label.user.edit"/></h4>
    </section>
    <section class="content">
        <div class="box box-primary">
            <div class="box-body">
                <div class="form-horizontal">
                    <div id="show" class="sie-padding-top">
                        <div class="form-group form-group-change">
                            <label class="col-md-5 sie-left-name">机床类型:</label>

                            <div class="col-md-7">
                                <select id="mtType" class="form-control sie-input-border sie-input-uwh"
                                        style="padding: 1px 6px;">

                                </select>
                            </div>
                        </div>
                        <div class="form-group form-group-change">
                            <label class="col-md-5 sie-left-name">状态类型:</label>

                            <div class="col-md-7">
                                <select id="stType" class="form-control sie-input-border sie-input-uwh"
                                        style="padding: 1px 6px;" onchange="oldSettings()">

                                </select>
                            </div>
                        </div>

                        <div class="form-group form-group-change">
                            <label class="col-md-5 sie-left-name">状态码及别名:</label>

                            <div class="col-md-7" id="one" data-id="values">
                                <div style="margin-bottom:5px;" class="row_value">
                                    <input data-key="key" placeholder="状态码.."
                                           class="form-control sie-input-border sie-input-uwh"
                                           style="width: 90px;"><!--
                                        --><input data-value="value" placeholder="别名..."
                                                  class="form-control sie-input-border sie-input-uwh"
                                                  style="width: 100px;vertical-align: top;"><!--
                                        --><a href="javascript:addRow('one');" class="dashes-button-lightBlue"
                                              style="vertical-align: top;margin: 0;padding: 0 10px;width: auto;display: inline-block;">
                                    <i class="fa fa-plus-circle" style="color: #41aaaa;margin-top: 6px;"></i>
                                    <span>添加</span>
                                </a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-2 col-md-offset-5" style="text-align: center;margin-top: 75px;">
                        <a class="solid-button-orange" href="javascript:;" style="margin-bottom: 20px;">确定</a>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>
<jsp:include page="../../include/foot.jsp"/>
<script>
    $(document).ready(function () {
        $.ajax({
            url: "/partner/{tenant}/tenant/statusType/moreInfo".replace("{tenant}", getKeyByUrl()),
            type: "get",
            success: function (data) {
                $.each(data.types, function (index, type) {
                    var $option = $("<option></option>").text(type);
                    $("#mtType").append($option);
                });
                $("#stType").append($("<option></option>").text("请选择"));
                $.each(data.status, function (index, s) {
                    var $option = $("<option></option>").text(s.type).attr("value", s.id);
                    $("#stType").append($option);
                });
            },
            error: function () {

            }
        });

        $(".solid-button-orange").click(function () {
            var data = getData();
            $.ajax({
                url: "/partner/{tenant}/api/v1/state/stateSetting".replace("{tenant}", getKeyByUrl()),
                type: "post",
                contentType: "application/json;charset=utf-8",
                data: JSON.stringify(data),
                success: function () {
                    window.location.replace('/partner/{tenant}/state/settingList'.replace("{tenant}", getKeyByUrl()));
                },
                error: function (e) {
                    console.log(e);
                }
            })
        })
    });

    function addRow(position) {
        var $row = $("<div></div>").addClass("row_value").attr("style", 'margin-bottom:5px;').append(
                $("<input/>").addClass("form-control sie-input-border sie-input-uwh").attr("style", "width:90px;").attr({
                    "data-key": "key",
                    "placeholder": "状态码.."
                })).append(
                $("<input/>").addClass("form-control sie-input-border sie-input-uwh").attr("style", "width:100px;vertical-align: top;").attr({
                    "data-value": "value",
                    "placeholder": "别名.."
                })).append(
                $("<a></a>").addClass("dashes-button-lightBlue").attr({
                    href: "javascript:addRow(\'" + position + "\');",
                    style: "vertical-align: top;margin: 0;padding: 0 10px;width: auto;display: inline-block;"
                }).append(
                        $("<i></i>").addClass("fa fa-plus-circle").attr("style", "color: #41aaaa;margin-top: 6px;")).append(
                        $("<span></span>").attr("style", "margin-left:4px;").text("添加")
                )
        );

        var _this = $("#" + position).find(".row_value:last");

        $(_this).after($row);

        $(_this).find("a").attr("href", "javascript:;").attr("onclick", "deleteRow(this)");
        $(_this).find("a").find("span").text("删除");
    }
    function deleteRow(_this) {
        $(_this).parent().remove();
    }

    function getData() {
        var x = {}, h = {}, z = [];
        x["mtType"] = $("#mtType option:selected").text();
        h["stType"] = $("#stType option:selected").val();
        h["stTypeName"] = $("#stType option:selected").text();

        var values = [];
        var c = $(".row_value");
        $.each(c, function (index, d) {
            var y = {};
            y["statusType"] = $(d).find("[data-key=key]").val();
            y["name"] = $(d).find("[data-value=value]").val();
            values.push(y);
        });
        h["values"] = values;
        z.push(h);
        x["mtValue"] = z;
        return x;
    }

    function loadPage(data) {
        var $div_row, size = data.length;
        $.each(data, function (index, a) {
            if (index % 2 == 0) {
                $div_row = $("<div></div>").addClass("row").attr("style", "margin-bottom: 15px;border-bottom: 1px #F3E8E8 solid;");
                includePage(a, $div_row);
                if (index == size - 1) {
                    $("#show").append($div_row);
                }
            } else {
                includePage(a, $div_row);
                $("#show").append($div_row);
            }
        })
    }

    function includePage(s, $d) {
        var $f = $("<div></div>").addClass("col-md-6").append(
                $("<div></div>").addClass("form-group form-group-change").append(
                        $("<label></label>").addClass("col-md-4 sie-left-name").text("状态类型")).append(
                        $("<div></div>").addClass("col-md-8").append(
                                $("<select></select>").addClass("form-control sie-input-border sie-input-uwh").attr({
                                    "data-type": "type",
                                    "style": "padding:2px 5px;"
                                }).append(
                                        $("<option></option>").attr("value", s.id).text(s.id))))).append(
                $("<div></div>").addClass("form-group form-group-change").append(
                        $("<label></label>").addClass("col-md-4 sie-left-name").text("状态名称")).append(
                        $("<div></div>").addClass("col-md-8").append(
                                $("<input/>").addClass("form-control sie-input-border sie-input-uwh").attr("data-name", "name")))).append(
                $("<div></div>").addClass("form-group form-group-change").append(
                        $("<label></label>").addClass("col-md-4 sie-left-name").text("values")).append(
                        loadValuesPage(s.values)
                )
        );

        $d.append($f);
    }

    function loadValuesPage(d) {
        var $b = $("<div></div>").addClass("col-md-8").attr("data-id", "values");
        $.each(d, function (index, a) {
            var $a = $("<div></div>").addClass("row_value").attr({"style": "margin-bottom:5px;"}).append(
                    $("<input/>").addClass("form-control sie-input-border sie-input-uwh").attr({
                        "data-key": "key",
                        "style": "width:50px;",
                        "value": a.value,
                        "readonly": "readonly"
                    })).append(
                    $("<input/>").addClass("form-control sie-input-border sie-input-uwh").attr({
                        "data-value": "value",
                        "style": "width:140px;vertical-align: top;"
                    })
            );
            $b.append($a);
        });

        return $b;
    }

    function oldSettings() {
        $.ajax({
            url: "/partner/{tenant}/api/v1/state/getOldSetting".replace("{tenant}", getKeyByUrl()),
            data: {
                type: $("#mtType option:selected").text(),
                stType: $("#stType option:selected").val()
            },
            type: "get",
            success: function (data) {
                $("#one").html('');
                if (data.data == null) {
                    var $row = $("<div></div>").addClass("row_value").attr("style", 'margin-bottom:5px;').append(
                            $("<input/>").addClass("form-control sie-input-border sie-input-uwh").attr("style", "width:90px;").attr({
                                "data-key": "key",
                                "placeholder": "状态码.."
                            })).append(
                            $("<input/>").addClass("form-control sie-input-border sie-input-uwh").attr("style", "width:100px;vertical-align: top;").attr({
                                "data-value": "value",
                                "placeholder": "别名.."
                            })).append(
                            $("<a></a>").addClass("dashes-button-lightBlue").attr({
                                href: "javascript:addRow(\'one\');",
                                style: "vertical-align: top;margin: 0;padding: 0 10px;width: auto;display: inline-block;"
                            }).append(
                                    $("<i></i>").addClass("fa fa-plus-circle").attr("style", "color: #41aaaa;margin-top: 6px;")).append(
                                    $("<span></span>").attr("style", "margin-left:4px;").text("添加")
                            )
                    );
                    $("#one").append($row);
                } else {
                    $.each(data.data.values, function (index, value) {
                        var $btn;
                        if (index == data.data.values.length - 1) {
                            $btn = $("<a></a>").addClass("dashes-button-lightBlue").attr({
                                href: "javascript:addRow(\'one\');",
                                style: "vertical-align: top;margin: 0;padding: 0 10px;width: auto;display: inline-block;"
                            }).append(
                                    $("<i></i>").addClass("fa fa-plus-circle").attr("style", "color: #41aaaa;margin-top: 6px;")).append(
                                    $("<span></span>").attr("style", "margin-left:4px;").text("添加")
                            )
                        } else {
                            $btn = $("<a></a>").addClass("dashes-button-lightBlue").attr({
                                href: "javascript:;",
                                onclick: "deleteRow(this)",
                                style: "vertical-align: top;margin: 0;padding: 0 10px;width: auto;display: inline-block;"
                            }).append(
                                    $("<i></i>").addClass("fa fa-plus-circle").attr("style", "color: #41aaaa;margin-top: 6px;")).append(
                                    $("<span></span>").attr("style", "margin-left:4px;").text("删除")
                            )
                        }
                        var $row = $("<div></div>").addClass("row_value").attr("style", 'margin-bottom:5px;').append(
                                $("<input/>").addClass("form-control sie-input-border sie-input-uwh").attr("style", "width:90px;").attr({
                                    "data-key": "key",
                                    "placeholder": "状态码..",
                                    "value": value.statusType
                                })).append(
                                $("<input/>").addClass("form-control sie-input-border sie-input-uwh").attr("style", "width:100px;vertical-align: top;").attr({
                                    "data-value": "value",
                                    "placeholder": "别名..",
                                    "value": value.name
                                })).append($btn);
                        $("#one").append($row);
                    })
                }
            },
            error: function (e) {

            }
        })
    }
</script>

